import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import {
  Modal,
  Form,
  Input,
  Select,
  Button,
  Checkbox,
  Row,
  Col,
  Divider,
  Alert,
  message,
  Image,
  Tag
} from 'antd';
import {
  queryCardBin,
  queryCardHolder,
  getCardFees,
  createCard,
  type CardBinListType,
  type CardHolderListType,
  type CardFeesData,
  type CreateCardRequest
} from '@/api/modules/card';
import { useRechargeStore } from '@/store';
import { useNavigate } from 'react-router-dom';

const { Option } = Select;

/**
 * 创建银行卡组件属性接口
 * 定义组件接收的props类型
 */
interface CreateBankCardProps {
  onRefresh: () => void; // 刷新回调函数，创建成功后调用以更新父组件数据
}

/**
 * 创建银行卡引用接口
 * 定义通过ref暴露给父组件的方法
 */
export interface CreateBankCardRef {
  show: () => void; // 显示模态框方法
  close: () => void; // 关闭模态框方法
}

/**
 * 创建银行卡组件
 * 用于创建新银行卡的模态框表单，通过ref暴露方法给父组件
 * @param props 组件属性
 * @returns React组件
 */
const CreateBankCard = forwardRef<CreateBankCardRef, CreateBankCardProps>(({ onRefresh }, ref) => {
  const navigate = useNavigate(); // 路由导航hook
  const rechargeStore = useRechargeStore(); // 充值状态管理store
  const [form] = Form.useForm(); // Ant Design表单实例
  const [modalVisible, setModalVisible] = useState(false); // 模态框显示状态
  const [modalLoading, setModalLoading] = useState(false); // 模态框加载状态（表单提交）
  const [cardHolderLoading, setCardHolderLoading] = useState(false); // 持卡人列表加载状态

  // 卡片费用数据状态
  const [feesData, setFeesData] = useState<CardFeesData>({
    card_opening_fee: '0', // 开卡手续费
    card_service_fee: '0', // 卡片服务费
    available_balance: '0' // 可用余额
  });

  // 卡BIN列表状态
  const [cardBinList, setCardBinList] = useState<CardBinListType[]>([]);
  // 持卡人列表状态
  const [cardHolderList, setCardHolderList] = useState<CardHolderListType[]>([]);

  // 表单数据状态
  const [formData, setFormData] = useState<CreateCardRequest>({
    cardBin: '', // 卡BIN
    cardCurrency: 'USD', // 卡本币，默认美元
    cardFormFactor: 'virtual_card', // 卡介质，默认虚拟卡
    cardScheme: '', // 卡组织
    cardType: 'recharge', // 卡类型，默认充值卡
    cardholderId: '', // 持卡人ID
    rechargeAmount: 0 // 转入金额
  });

  /**
   * 暴露方法给父组件
   * 使用useImperativeHandle自定义ref暴露的值
   */
  useImperativeHandle(ref, () => ({
    /**
     * 显示模态框
     */
    show: () => setModalVisible(true),
    /**
     * 关闭模态框
     */
    close: () => setModalVisible(false)
  }));

  /**
   * 获取卡片费用信息
   * 从API获取开卡手续费、服务费和可用余额
   */
  const getCardFeesData = async () => {
    try {
      const response = await getCardFees();
      setFeesData(response.data); // 设置费用数据
    } catch (error) {
      console.error('获取卡片费用失败:', error);
      message.error('获取卡片费用失败');
    }
  };

  /**
   * 获取卡BIN列表
   * 根据当前选择的卡类型、组织、货币和介质查询可用的卡BIN
   */
  const getCardBinList = async () => {
    try {
      const response = await queryCardBin({
        _action: 'getData',
        _subAction: 'getCarBin',
        cardType: formData.cardType,
        cardScheme: formData.cardScheme,
        cardCurrency: formData.cardCurrency,
        cardFormFactor: formData.cardFormFactor
      });

      setCardBinList(response.data.options); // 设置卡BIN列表
      form.setFieldValue('cardBin', ''); // 清空已选择的卡BIN
    } catch (error) {
      console.error('获取卡BIN列表失败:', error);
      message.error('获取卡BIN列表失败');
    }
  };

  /**
   * 获取持卡人列表
   * 从API获取所有可用的持卡人选项
   */
  const getCardHolderList = async () => {
    setCardHolderLoading(true); // 开始加载持卡人列表
    try {
      const response = await queryCardHolder({
        _action: 'getData',
        _subAction: 'getCardholder'
      });

      setCardHolderList(response.data.options); // 设置持卡人列表
      form.setFieldValue('cardholderId', ''); // 清空已选择的持卡人
    } catch (error) {
      console.error('获取持卡人列表失败:', error);
      message.error('获取持卡人列表失败');
    } finally {
      setCardHolderLoading(false); // 结束加载
    }
  };

  /**
   * 处理表单提交
   * 创建新卡片
   */
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields(); // 验证表单字段
      setModalLoading(true); // 开始加载

      await createCard(values); // 调用API创建卡片
      message.success('卡片创建成功'); // 成功提示
      setModalVisible(false); // 关闭模态框
      onRefresh(); // 调用刷新回调
    } catch (error) {
      console.error('创建卡片失败:', error);
      // 错误处理（API调用会自动显示错误消息）
    } finally {
      setModalLoading(false); // 结束加载
    }
  };

  /**
   * 关闭模态框
   * 重置表单和状态
   */
  const handleClose = () => {
    setModalVisible(false);
    form.resetFields(); // 重置表单字段
    // 重置表单数据状态
    setFormData({
      cardBin: '',
      cardCurrency: 'USD',
      cardFormFactor: 'virtual_card',
      cardScheme: '',
      cardType: 'recharge',
      cardholderId: '',
      rechargeAmount: 0
    });
  };

  /**
   * 处理表单值变化
   * 更新表单数据状态，用于依赖其他字段的查询
   * @param changedValues 变化的字段值
   */
  const handleFormChange = (changedValues: Partial<CreateCardRequest>) => {
    setFormData(prev => ({ ...prev, ...changedValues }));
  };

  // useEffect钩子：模态框显示时获取费用数据和持卡人列表
  useEffect(() => {
    if (modalVisible) {
      getCardFeesData();
      getCardHolderList();
    }
  }, [modalVisible]);

  // useEffect钩子：当卡组织、类型、货币或介质变化时重新获取卡BIN列表
  useEffect(() => {
    if (modalVisible && formData.cardScheme) {
      getCardBinList();
    }
  }, [formData.cardScheme, formData.cardType, formData.cardCurrency, formData.cardFormFactor]);

  // 卡介质选项配置
  const cardFormFactors = [
    { value: 'virtual_card', label: '虚拟卡', disable: false },
    { value: 'physical_card', label: '实体卡', disable: false }
  ];

  // 卡类型选项配置
  const cardTypes = [
    { value: 'recharge', label: '充值卡', disable: false },
    { value: 'prepaid', label: '预付卡', disable: false }
  ];

  // 卡组织选项配置
  const cardScheme = [
    { value: 'visa', label: 'Visa', create_show: true, active: 'visa-icon', inactive: 'visa-icon-inactive' },
    { value: 'mastercard', label: 'MasterCard', create_show: true, active: 'mastercard-icon', inactive: 'mastercard-icon-inactive' }
  ];

  // 卡本币选项配置
  const cardCurrency = [
    { value: 'USD', label: '美元', disable: false, iso: 'us' },
    { value: 'EUR', label: '欧元', disable: false, iso: 'eu' },
    { value: 'GBP', label: '英镑', disable: false, iso: 'gb' }
  ];

  return (
    <Modal
      title="创建新的卡片" // 模态框标题
      open={modalVisible} // 控制模态框显示
      onCancel={handleClose} // 取消回调
      footer={[
        <Button key="cancel" size="large" disabled={modalLoading} onClick={handleClose}>
          取消 {/* 取消按钮 */}
        </Button>,
        <Button key="submit" type="primary" size="large" loading={modalLoading} onClick={handleSubmit}>
          确认提交 {/* 提交按钮 */}
        </Button>
      ]}
      width={800} // 模态框宽度
      style={{ top: 20 }} // 顶部间距
    >
      <div style={{ maxWidth: 600, margin: '0 auto' }}> {/* 内容区域居中 */}
        {/* Ant Design表单组件 */}
        <Form
          form={form} // 绑定表单实例
          layout="vertical" // 垂直布局
          size="large" // 大尺寸
          initialValues={formData} // 初始值
          onValuesChange={handleFormChange} // 值变化回调
        >
          {/* 卡介质选择字段 */}
          <Form.Item name="cardFormFactor" label="卡介质" rules={[{ required: true, message: '请选择卡介质' }]}>
            <Checkbox.Group>
              <Row gutter={[16, 16]}> {/* 网格布局 */}
                {cardFormFactors.map(item => (
                  <Col key={item.value}>
                    <Checkbox value={item.value} disabled={item.disable}>
                      {item.label} {/* 显示标签 */}
                    </Checkbox>
                  </Col>
                ))}
              </Row>
            </Checkbox.Group>
          </Form.Item>

          {/* 卡类型选择字段 */}
          <Form.Item name="cardType" label="卡类型" rules={[{ required: true, message: '请选择卡类型' }]}>
            <Checkbox.Group>
              <Row gutter={[16, 16]}>
                {cardTypes.map(item => (
                  <Col key={item.value}>
                    <Checkbox value={item.value} disabled={item.disable}>
                      {item.label}
                    </Checkbox>
                  </Col>
                ))}
              </Row>
            </Checkbox.Group>
          </Form.Item>

          {/* 卡组织选择字段 */}
          <Form.Item label="卡组织">
            <Checkbox.Group>
              <Row gutter={[16, 16]}>
                {cardScheme.filter(item => item.create_show).map(item => ( // 过滤可显示的卡组织
                  <Col key={item.value}>
                    <Checkbox
                      value={item.value}
                      checked={formData.cardScheme === item.value} // 控制选中状态
                      onChange={e => {
                        if (e.target.checked) {
                          form.setFieldValue('cardScheme', item.value); // 设置卡组织值
                        }
                      }}
                    >
                      {/* 这里需要根据实际图标配置 */}
                      <span style={{ marginLeft: 8 }}>{item.label}</span> {/* 显示标签 */}
                    </Checkbox>
                  </Col>
                ))}
              </Row>
            </Checkbox.Group>
          </Form.Item>

          {/* 卡本币选择字段 */}
          <Form.Item name="cardCurrency" label="卡本币" rules={[{ required: true, message: '请选择卡本币' }]}>
            <Checkbox.Group>
              <Row gutter={[16, 16]}>
                {cardCurrency.map(item => (
                  <Col key={item.value}>
                    <Checkbox value={item.value} disabled={item.disable}>
                      <Image
                        src={`https://wallex2.oss-cn-hangzhou.aliyuncs.com/asset/images/flags/${item.iso}.png`} // 国旗图标
                        width={24}
                        height={16}
                        preview={false} // 禁止预览
                        style={{ marginRight: 8 }} // 右边距
                      />
                      {item.label} {/* 显示货币标签 */}
                    </Checkbox>
                  </Col>
                ))}
              </Row>
            </Checkbox.Group>
          </Form.Item>

          {/* 卡BIN选择字段 */}
          <Form.Item
            name="cardBin"
            label="卡BIN"
            rules={[{ required: true, message: '请选择卡BIN' }]}
          >
            <Checkbox.Group>
              <Row gutter={[8, 8]}>
                {cardBinList.map(item => (
                  <Col key={item.value}>
                    <Checkbox value={item.value}>{item.label}</Checkbox> {/* 显示卡BIN选项 */}
                  </Col>
                ))}
              </Row>
            </Checkbox.Group>
          </Form.Item>

          {/* 持卡人选择字段 */}
          <Form.Item
            name="cardholderId"
            label="持卡人"
            rules={[{ required: true, message: '请选择持卡人' }]}
          >
            <Select placeholder="请选择持卡人" loading={cardHolderLoading}> {/* 下拉选择器 */}
              {cardHolderList.map(item => (
                <Option key={item.value} value={item.value}>
                  {item.label} {/* 显示持卡人选项 */}
                </Option>
              ))}
            </Select>
          </Form.Item>

          {/* 转入金额输入字段 */}
          <Form.Item
            name="rechargeAmount"
            label={`转入金额 ${formData.cardCurrency}`} // 动态显示货币
            rules={[{ required: true, message: '请输入转入金额' }]}
            extra={ // 额外的提示信息
              <div style={{ textAlign: 'right', fontSize: '12px', color: '#666' }}>
                <span>余额不够？试试 </span>
                <Button
                  type="link"
                  size="small"
                  onClick={() => {
                    rechargeStore.setOpenRecharge(true); // 打开充值模态框
                    navigate('/fund_manage/recharge'); // 跳转到充值页面
                  }}
                >
                  立即充值 {/* 充值按钮 */}
                </Button>
                <span> 当前可用余额 </span>
                <span style={{ fontWeight: 'bold' }}>{feesData.available_balance}</span> {/* 显示可用余额 */}
                <Button
                  type="link"
                  size="small"
                  onClick={() => form.setFieldValue('rechargeAmount', Number(feesData.available_balance))} // 设置全部余额
                >
                  全部转入 {/* 全部转入按钮 */}
                </Button>
              </div>
            }
          >
            <Input type="number" min={0} placeholder="请输入转入金额" /> {/* 数字输入框 */}
          </Form.Item>
        </Form>

        {/* 费用信息显示 */}
        <div style={{ fontSize: '14px', color: '#666', marginBottom: 16 }}>
          <span>开卡手续费 </span>
          <span style={{ fontWeight: 'bold', color: '#000' }}>{feesData.card_opening_fee}</span> {/* 开卡手续费 */}
          <span> {formData.cardCurrency} </span>
          <Tag color="red" style={{ marginLeft: 8 }}>实时扣取</Tag> {/* 实时扣取标签 */}

          <span style={{ marginLeft: 24 }}>卡片服务费 </span>
          <span style={{ fontWeight: 'bold', color: '#000' }}>{feesData.card_service_fee}</span> {/* 卡片服务费 */}
          <span> {formData.cardCurrency}/月 </span>
          <Tag color="blue" style={{ marginLeft: 8 }}>按月扣取</Tag> {/* 按月扣取标签 */}
        </div>

        <Divider /> {/* 分隔线 */}

        {/* 信息提示框 */}
        <Alert
          message="转入还将收取手续费，实际费用根据银行渠道、转入金额等因素计算，实际到账金额以实际扣款手续费后的金额为准，具体明细可在【卡片详情】的【交易明细】中查看。"
          type="info" // 信息类型
          showIcon // 显示图标
        />
      </div>
    </Modal>
  );
});

export default CreateBankCard; // 导出组件